<template>
  <div>
    <!--  搜索框-->
    <div style="margin-bottom: 10px">
      <el-input @keyup.enter.native="search" style="width: 200px;margin:10px 5px"  placeholder="请输入证书编号" v-model="certificateNum" suffix-icon="el-icon-notebook-1"></el-input>
      <el-select clearable v-model="state" placeholder="请选择证书状态" style="width: 150px;margin:10px 5px">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>

      <el-date-picker
          style="margin:10px 5px;"
          v-model="certificateTime"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="证书颁发开始日期"
          end-placeholder="证书颁发结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          :picker-options="pickerOptions">
      </el-date-picker>

      <el-button class="ml-5" type="primary" @click="search">搜索</el-button>
      <el-button @click="reset">重置</el-button>
    </div>



    <!--  数据表格-->
    <el-table :data="tableData" border stripe :header-cell-style="tableHeaderColor">
      <el-table-column prop="issuedBy" label="证书发布机构" width="120"></el-table-column>
      <el-table-column prop="certificateName" label="证书名称"></el-table-column>
      <el-table-column prop="certificateNum" label="证书编号"></el-table-column>
      <el-table-column prop="certificateLevel" label="证书级别"></el-table-column>
      <el-table-column prop="certificateTime" :formatter="dateFormat2" label="证书颁发时间"></el-table-column>
      <el-table-column prop="state" label="证书状态" width="85">
        <template slot-scope="scope">
          <span v-if="scope.row.state==='pass'">审核通过</span>
          <span v-if="scope.row.state==='checking'">审核中</span>
          <span v-if="scope.row.state==='nopass'">审核不通过</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" :formatter="dateFormat" label="上传时间"></el-table-column>

<!--      <el-table-column label="操作" width="200" align="center">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="warning" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>-->
<!--          <el-popconfirm  title="确定删除吗？" @confirm="del(scope.row.id)"-->
<!--                          class="ml-5">-->
<!--            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>-->
<!--          </el-popconfirm>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>
    <!-- 分页插件 -->
    <div style="padding:10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <!-- 新增或修改对话框  -->
    <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="80px" size="small">
        <el-form-item label="姓名" >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" >
          <el-input v-model="form.sex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" >
          <el-input v-model="form.identity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="证书发布机构" >
          <el-input v-model="form.issuedBy" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="证书名称" >
          <el-input v-model="form.certificateName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="证书编号" >
          <el-input v-model="form.certificateNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="证书级别" >
          <el-input v-model="form.certificateLevel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="证书状态" >
          <el-input v-model="form.state" autocomplete="off"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>


  </div>

</template>

<script>
import * as fecha from "element-ui/lib/utils/date"

export default {
  name: "certificates",
  created() {
    this.name=this.user.realName
    this.identity=this.user.identity
    this.load()
  },
  data(){
    return{
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{},

      //搜索框部分
      name:"",
      identity:"",
      certificateNum:"",
      state:"",
      certificateTime:[],//证书时间范围
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },//时间范围选择
      options: [{
        value: 'pass',
        label: '审核通过'
      }, {
        value: 'checking',
        label: '审核中'
      }, {
        value: 'nopass',
        label: '审核不通过'
      }],


      //  表格部分
      tableData: [], //内容为[{k1:v1,k2:v2 ...},{},{}]
      //分页变量
      total:0,
      pageNum:1,
      pageSize:10,
      //新增或编辑时使用的模型
      form:{},
      dialogFormVisible:false,//对话框是否显示
      //多选框的数据
      multipleSelection:[],

    }
  },
  methods:{
    //搜索框部分
    search(){
      console.log(this.certificateTime)
      this.request.get("/certificates/page",{
        params:{
          pageNum:1,
          pageSize:this.pageSize,

          name:this.name,
          identity:this.identity,
          certificateNum:this.certificateNum,
          state:this.state,
          startTime:this.certificateTime[0],
          endTime:this.certificateTime[1],
        }
      }).then(res =>{
        console.log(res) //返回Result对象  res中的data为Page对象
        this.tableData=res.data.records
        this.total=res.data.total
      })
    },
    //搜索重置
    reset(){
      this.certificateNum=""
      this.state=""
      this.certificateTime=[]
      this.pageNum=1
      this.load()
    },

    //  表格部分
    // 关闭新增或编辑对话框
    cancel(){
      this.dialogFormVisible=false
      this.load()  //重新加载是因为 由于双向数据绑定，在编辑的时候就已经改变的数据
    },
    //  新增或修改
    save(){
      this.request.post("/certificates",this.form).then(res =>{
        if(res.code==='200'){
          this.$message.success("保存成功")
          this.dialogFormVisible=false
          this.load()
        }else{
          this.$message.error("保存失败")
          this.load()
        }
      })
    },
    //编辑行
    handleEdit(row){
      this.form=row
      this.dialogFormVisible=true
    },
    //删除行
    del(id){
      this.request.delete("/certificates/"+id).then(res=>{
        if(res.code==='200'){
          this.$message.success("删除成功")
          this.load()
        }else{
          this.$message.error("删除失败")
        }
      })
    },
    //分页插件
    //改变分页大小
    handleSizeChange(pageSize){
      console.log(pageSize)
      this.pageSize=pageSize;
      this.load()
    },
    //换页，直接点击页数 或 点击上一页下一页
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum=pageNum;
      this.load()
    },

    load(){
      this.request.get("/certificates/page",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,

          name:this.name,
          identity:this.identity,
          certificateNum:this.certificateNum,
          state:this.state
        }
      }).then(res =>{
        console.log(res)
        this.tableData=res.data.records
        this.total=res.data.total
      })
    },
    //表头样式
    tableHeaderColor({row, column, rowIndex, columnIndex}) {
      return 'background-color:lightblue;color:#fff;font-size:15px;'
    },
    //表格日期格式化
    dateFormat(row,column,cellValue){
      return cellValue ? fecha.format(new Date(cellValue),'yyyy-MM-dd HH:mm'):'';
    },
    dateFormat2(row,column,cellValue){
      return cellValue ? fecha.format(new Date(cellValue),'yyyy-MM-dd'):'';
    }
  }

}
</script>

<style scoped>

</style>